<template>
  <ScreenFit>
    <div class="dashboard">
      <div class="header">
        <BoardHeader></BoardHeader>
      </div>
      <div class="content">
        <div class="content-top">
          <BoardTab :info="biologicalAssetsInfo" :perHouseholdInfo="perHouseholdInfo"></BoardTab>
        </div>
        <div class="content-bottom">
          <div class="content-bottom-item">
            <CompanyList1 :info="collarSeedlingAbnormalInfo"></CompanyList1>
          </div>
          <div class="content-bottom-item">
            <CompanyList2 :info="inventoryCheckAbnormalInfo"></CompanyList2>
          </div>
          <div class="content-bottom-item">
            <CompanyList3 :info="abnormalListingInfo"></CompanyList3>
          </div>
          <div class="content-bottom-item">
            <CompanyList4 :info="confirmDeadInfo"></CompanyList4>
          </div>
          <div class="content-bottom-item">
            <CompanyList5 :info="untreatedTailPigInfo"></CompanyList5>
          </div>
        </div>
        <div class="content-bottom-right">
          <ShowCard :info="orgBiologicalAssetsInfo"></ShowCard>
        </div>
      </div>
    </div>
  </ScreenFit>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import BoardHeader from '@/components/CompanyDashBoard/BoardHeader.vue'
import BoardTab from '@/components/CompanyDashBoard/BoardTab.vue'
import CompanyList1 from '@/components/CompanyDashBoard/CompanyList1.vue'
import CompanyList2 from '@/components/CompanyDashBoard/CompanyList2.vue'
import CompanyList3 from '@/components/CompanyDashBoard/CompanyList3.vue'
import CompanyList4 from '@/components/CompanyDashBoard/CompanyList4.vue'
import CompanyList5 from '@/components/CompanyDashBoard/CompanyList5.vue'
import ShowCard from '@/components/CompanyDashBoard/ShowCard.vue'
import { getOrgBiologicalAssetsInfo } from '@/api/companyApi'
import {
  getBiologicalAssetsInfo,
  getInventoryCheckAbnormalInfo,
  getConfirmDeadInfo,
  getAbnormalListingInfo,
  getCollarSeedlingAbnormalInfo,
  getUntreatedTailPigInfo,
  getPerHouseholdInfo
} from '@/api/serviceApi'
import { getCurrentDate } from '@/utils/common.js'
import { useRoute } from 'vue-router'

let time = getCurrentDate()
const route = useRoute()
// 查询任务分析区指标接口
const orgBiologicalAssetsInfo = ref([])
const queryOrgBiologicalAssetsInfo = async () => {
  try {
    const res = await getOrgBiologicalAssetsInfo({
      orgId: route.query.orgId,
      dateTime: time
    })
    if (res && res.data) {
      orgBiologicalAssetsInfo.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 查询养户生物数据
const biologicalAssetsInfo = ref()
const queryBiologicalAssetsInfo = async () => {
  try {
    const res = await getBiologicalAssetsInfo({
      orgId: route.query.orgId,
      dateTime: time,
      type: 1 // 1公司 2:服务部
    })
    if (res && res.data) {
      biologicalAssetsInfo.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 存栏盘点异常事件
const inventoryCheckAbnormalInfo = ref()
const queryInventoryCheckAbnormalInfo = async () => {
  try {
    const res = await getInventoryCheckAbnormalInfo({
      orgId: route.query.orgId,
      dateTime: time,
      type: 1 // 1公司 2:服务部
    })
    if (res && res.data) {
      inventoryCheckAbnormalInfo.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 待确认死淘猪信息
const confirmDeadInfo = ref()
const queryConfirmDeadInfo = async () => {
  try {
    const res = await getConfirmDeadInfo({
      orgId: route.query.orgId,
      dateTime: time,
      type: 1
    })
    if (res && res.data) {
      confirmDeadInfo.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 出栏点数异常事件
const abnormalListingInfo = ref()
const queryAbnormalListingInfo = async () => {
  try {
    const res = await getAbnormalListingInfo({
      orgId: route.query.orgId,
      dateTime: time,
      type: 1
    })
    if (res && res.data) {
      abnormalListingInfo.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 进苗异常事件
const collarSeedlingAbnormalInfo = ref()
const queryCollarSeedlingAbnormalInfo = async () => {
  try {
    const res = await getCollarSeedlingAbnormalInfo({
      orgId: route.query.orgId,
      dateTime: time,
      type: 1
    })
    if (res && res.data) {
      collarSeedlingAbnormalInfo.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 未处理尾猪事件
const untreatedTailPigInfo = ref()
const queryUntreatedTailPigInfo = async () => {
  try {
    const res = await getUntreatedTailPigInfo({
      orgId: route.query.orgId,
      dateTime: time,
      type: 1 // 1:公司 2:服务部
    })
    if (res && res.data) {
      untreatedTailPigInfo.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 户均尾猪处理天数
const perHouseholdInfo = ref()
const queryPerHouseholdInfo = async () => {
  try {
    const res = await getPerHouseholdInfo({
      orgId: route.query.orgId,
      type: 1 // 1:公司 2:服务部
    })
    if (res && res.data) {
      perHouseholdInfo.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

onMounted(() => {
  queryOrgBiologicalAssetsInfo()
  queryBiologicalAssetsInfo()
  queryInventoryCheckAbnormalInfo()
  queryConfirmDeadInfo()
  queryAbnormalListingInfo()
  queryCollarSeedlingAbnormalInfo()
  queryUntreatedTailPigInfo()
  queryPerHouseholdInfo()
})
</script>

<style scoped lang="scss">
.dashboard {
  background: linear-gradient(90deg, #04102a, #123d70, #04102a);
  color: white;
  width: 100%;
  height: 100%;

  .content-bottom {
    display: flex;
    padding: 0 43px;
    justify-content: space-between;

    .content-item {
      margin-right: 10px;
    }
  }

  .content-bottom-right {
    padding: 0 43px;
  }
}
</style>
